<!--
 * @Author: wangding
 * @Date: 2020-11-06 17:14:06
 * @LastEditTime: 2021-02-20 10:03:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\overview-inverter\inverterData\chart.vue
-->
<template>
    <div class="inverterData-chart-main-box">
        <div class="search-box">
            <div>
                <span>{{$t('report.selectTime')}}：</span>
                <el-date-picker
                v-model="begin"
                type="date"
                :placeholder="$t('selectDate')"
                value-format='yyyy-MM-dd'
                @change='changeDateTime'
                :clearable='false'
                :picker-options="pickerOptionsStatus"
                >
                </el-date-picker>
                <span>-</span>
                <el-date-picker
                v-model="end"
                type="date"
                :placeholder="$t('selectDate')"
                value-format='yyyy-MM-dd'
                @change='changeDateTime'
                :clearable='false'
                :picker-options="pickerOptionsEnd"
                >
                </el-date-picker>
            </div>
            <div style="margin-left:10px;">
                <span>{{$t('inverterState.chart.states')}}:</span>
                <el-select v-model="selectDatas" :multiple-limit='4' :style="returnWidth" multiple :placeholder="$t('please_choose')" @change='cs'>
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.code"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div style="margin-left:10px;">
                <el-button type="primary" @click="query" style='margin-left:10px;'>{{$t('query')}}</el-button>
            </div>
        </div>
        <div class='content-box'>
            <div class='echarts' id='echarts' v-loading="loading" :style='returnWindowWidth' v-if='selectDatas.length>0'>
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment'
export default {
    components: {

    },
    props: {

    },
    data() {
        return {
            pickerOptions:{ //禁用今天之后的时间
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            },
            begin:moment().format("YYYY-MM-DD"),
            end:moment().format("YYYY-MM-DD"),
            selectDatas:'',
            options:[],
            remarkDatas:[],
            selectWidthDom:'',
            historyDataList:[],
            echartDataList:{},
            loading:false,

        };
    },
    computed: {
        returnWidth(){
            return `width:${(this.selectWidthDom || 114) + 100}px;`
        },
        returnWindowWidth(){
            return `width: ${document.documentElement.clientWidth}px;` 
        },
        returnUserType(){
            return localStorage.getItem('userType')
        },
        pickerOptionsStatus(){ //禁用今天之后的时间
        let that = this
            return {
                disabledDate(time) {
                    return time.getTime() > new Date(that.end).getTime() || time.getTime() > Date.now() 
                },
            }
        },
        pickerOptionsEnd(){ //禁用今天之后的时间
            let that = this
            return {
                disabledDate(time) {
                    return time.getTime() < new Date(that.begin).getTime()-86400000 || time.getTime() > Date.now() 
                },
            }
        },
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch()
    },
    methods: {
        initPage(){
            this.getInverterHistoryData()
        },
        initEchart(){
            let option= {
                tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                grid: {
                    left:'10%',
                    right:'15%',
                    bottom:'15%'
                    },
                legend: {
                        itemWidth: 20,
                        itemHeight: 15
                },
                dataZoom: [
                    {
                        
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100
                    }
                ],
            //     toolbox: { //选择区域进行缩放
            // 　　　　show:true,
            // 　　　　feature:{
            // 　　　　　dataZoom: {
            // 　　　　　　yAxisIndex:"none"
            // 　　　　　},
            // 　　　　}
            // 　　　},
                xAxis : [
                    {
                    
                        type : 'category',
                        axisTick: {
                                alignWithLabel: true
                        },
                        data: this.historyDataList.map(item=>{
                           return  item.timeStringVal
                        }),
                    }
                ],
            }
            let seriesArray = []
            let yAxisArray = []
            let yAxisIndex = 0
            for(let key  in this.echartDataList){
                let obj = {
                        name:this.returnName(key),
                        type:'line',
                        symbolSize: 0,
                        smooth: false ,
                        yAxisIndex: this.returnYAxisIndex(key),
                        data:this.echartDataList[key] || 0
                    }
                let objY = {
                        name :this.returnRemark(key),
                        type : 'value',
                        inverse: false,
                        // interval : 25,//强制设置坐标轴分割间隔。
                        axisTick:{       //x轴刻度线
                            show:false
                        },
                        splitLine: {
                            show: false
                        },
                        position: this.returnPos(yAxisIndex),
                        offset: this.returnOffset(yAxisIndex),
                        nameGap: this.returnNameGap(yAxisIndex),//name距离顶部位置
                        nameTextStyle:{
                            padding: [0, 0, 0, 0]//name的位置
                        }
                }
                seriesArray.push(obj)
                
                
            }
            for(let i=0;i<this.remarkDatas.length;i++){
                let objY = {
                        name :this.remarkDatas[i],
                        type : 'value',
                        inverse: false,
                        // interval : 25,//强制设置坐标轴分割间隔。
                        axisTick:{       //x轴刻度线
                            show:false
                        },
                        splitLine: {
                            show: false
                        },
                        position: this.returnPos(yAxisIndex),
                        offset: this.returnOffset(yAxisIndex),
                        nameGap: this.returnNameGap(yAxisIndex),//name距离顶部位置
                        nameTextStyle:{
                            padding: [0, 0, 0, 0]//name的位置
                        }
                }
                yAxisArray.push(objY)
                yAxisIndex++
            }
            option.series = seriesArray
            option.yAxis = yAxisArray
            this.$nextTick(()=>{
                let myChart = this.echarts.init(document.getElementById("echarts"));
                myChart.setOption(option,true); //注意，第二个参数为重置数据而不是合并数据，避免去掉数据的时候，无法删除的情况
            })
        },
        returnYAxisIndex(key){
            let remark = this.returnRemark(key)
            let index = this.remarkDatas.indexOf(remark)
            return index
        },
        unique (arr) {
            return Array.from(new Set(arr))
        },
        returnNameGap(index){
            let length = this.remarkDatas.length
            if(length == 1){
                if(index == 0){
                    return 15
                }
            }
            if(length == 2){
                if(index == 0){
                    return 15
                }
                if(index == 1){
                    return 15
                }
            }
            if(length == 3){
                if(index == 0){
                    return 35
                }
                if(index == 1){
                    return 15
                }
                if(index == 2){
                    return 15
                }
            }
            if(length == 4){
                if(index == 0){
                    return 35
                }
                if(index == 1){
                    return 15
                }
                if(index == 2){
                    return 35
                }
                if(index == 3){
                    return 15
                }
            }
        },
        returnOffset(index){
            let length = this.remarkDatas.length
            if(length == 1){
                if(index == 0){
                    return 0
                }
            }
            if(length == 2){
                if(index == 0){
                    return 0
                }
                if(index == 1){
                    return 0
                }
            }
            if(length == 3){
                if(index == 0){
                    return 80
                }
                if(index == 1){
                    return 0
                }
                if(index == 2){
                    return 0
                }
            }
            if(length == 4){
                if(index == 0){
                    return 80
                }
                if(index == 1){
                    return 0
                }
                if(index == 2){
                    return 80
                }
                if(index == 3){
                    return 0
                }
            }
        },
        returnPos(index){
            let length = this.remarkDatas.length
            if(length == 1){
                if(index == 0){
                    return 'left'
                }
            }
            if(length == 2){
                if(index == 0){
                    return 'left'
                }
                if(index == 1){
                    return 'right'
                }
            }
            if(length == 3){
                if(index == 0){
                    return 'left'
                }
                if(index == 1){
                    return 'left'
                }
                if(index == 2){
                    return 'right'
                }
            }
            if(length == 4){
                if(index == 0){
                    return 'left'
                }
                if(index == 1){
                    return 'left'
                }
                if(index == 2){
                    return 'right'
                }
                if(index == 3){
                    return 'right'
                }
            }
        },
        returnName(key){
            let name = ''
            this.options.forEach(item => {
                if(item.value == key){
                    name = `${item.code}(${item.remark})`
                }
            })
            return name
        },
        returnRemark(key){
            let name = ''
            this.options.forEach(item => {
                if(item.value == key){
                    name = `${item.remark}`
                }
            })
            return name
        },
        query(){
            var startTmp=(new Date(this.begin)).getTime();
            var endTmp=(new Date(this.end)).getTime()
            var intervalTime=60*24*60*60*1000
            if(startTmp>endTmp){
                // openMsg(getCommonText("#js_startTime_compare_endTime"));
                this.comm.showMsg(false,this.$t('index_js_startTime_compare_endTime'))
                return false;
            }else if(endTmp-startTmp>intervalTime&&intervalTime!=0){
                // openMsg(getCommonText("#js_time_range_over")+interval+getCommonText("#js_days"));
                this.comm.showMsg(false,this.$t('index_js_time_range_over')+60+this.$t('index_js_days'))
                return false;
            }else{
            }
            if(startTmp.length==0){
                // openMsg(getCommonText("#js_startTime_select"));
                this.comm.showMsg(false,this.$t('index_js_startTime_select'))
                return false;
            }
            if(endTmp.length==0){
                // openMsg(getCommonText("#js_endTime_select"));
                this.comm.showMsg(false,this.$t('index_js_endTime_select'))
                return false;
            }
            this.getInverterHistoryData()
        },
        async getInverterHistoryData(){
            this.loading = true
            let res = await this.API.getInverterHistoryData({
                inverterSn:sessionStorage.getItem('selRow_inverter_sn'),
                begin:this.begin,
                end:this.end,
                selectDatas:this.selectDatas,
                userId:sessionStorage.getItem('selRow_userId')
            })
            this.historyDataList = res
            this.returnEcharsData()
            this.initEchart()
            this.loading = false
        },
        changeDateTime(){
            
        },
        returnEcharsData(){
            this.echartDataList = {}
            this.selectDatas.forEach(item => {
                this.echartDataList[item + ''] = []
            })
            for(let key  in this.echartDataList){
                this.echartDataList[key] = this.historyDataList.map(item=>{
                    return  item[key] || 0
                })
            }
        },
        cs(){
            this.remarkDatas = []
            this.selectDatas.forEach(item => {
                this.options.forEach(items => {
                    if(item == items.value ){
                        this.remarkDatas.push(items.remark)
                    }
                })
            })
            this.remarkDatas = this.unique(this.remarkDatas)
            //暂时用来监听多选框的宽度
            this.getInverterHistoryData()
            this.$nextTick(()=>{
                let select  = document.querySelector('.el-select__tags span')
                this.selectWidthDom = select.offsetWidth
            })
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:`INVERTER_STATE_ARGS_${sessionStorage.getItem('selRow_inverterType')},FIRM_TEM_NAME`,
                lang:localStorage.getItem('lan') || 'zh_CN'
            })
            
            let mianData = res[`INVERTER_STATE_ARGS_${sessionStorage.getItem('selRow_inverterType')}`]
            let smallData = res.FIRM_TEM_NAME
            
            for(let i = 0;i<mianData.length;i++){
                if(mianData[i].code !==smallData[0].code || this.returnUserType == 2){
                    this.options.push(mianData[i]);
                }
            }
            this.selectDatas = [this.options[0].value]
            this.remarkDatas = [this.options[0].remark]
            this.getInverterHistoryData()
        },
    },
};
</script>

<style  lang="less" >
.inverterData-chart-main-box{
    .search-box{
        div{
            display: flex;
            align-items: center;
        }
        
    }
    .el-select__tags {
        white-space: nowrap;
        overflow: hidden;
    }
    .el-select__tags>span {
        display: block;
    }
    .echarts{
        height: 500px;
    }
}
</style>
